<template>
  <div class="container">
    <div class="filter-container">
      <el-form ref="listQuery" :inline="true" :model="listQuery">
        <el-form-item label="设备组">
          <el-select v-model="listQuery.group_id" filterable="">
            <el-option :key="-1" label="全部" value="null"></el-option>
            <el-option v-for="(item, index) in groupList" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称"><el-input v-model="listQuery.keyword" placeholder=""
            clearable></el-input></el-form-item>
        <el-form-item label="状态">
          <el-select v-model="listQuery.is_online" filterable="">
            <el-option :key="-1" label="全部" value="null"></el-option>
            <el-option v-for="(item, index) in status" :key="index" :label="item.title" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="middle" @click="search()">搜索</el-button>
          <el-button type="default" plain size="middle" @click="clear()">清空</el-button>
          <el-button type="primary" size="middle" @click="addUser()" v-if="controlBtn.add">添加设备</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="code" label="编号" align="center">
      </el-table-column>
      <el-table-column prop="title" label="名称" align="center">
      </el-table-column>
      <el-table-column prop="group_title" label="设备组" align="center">
      </el-table-column>
      <el-table-column prop="device_type_title" label="类型" align="center">
      </el-table-column>
      <el-table-column prop="work_type_title" label="作业类型" align="center">
      </el-table-column>
      <el-table-column prop="is_online" align="center" label="在线状态">
        <template slot-scope="{row}"><span>{{ { '20': '离线', '10': '在线' }[row.is_online] }}</span></template>
      </el-table-column>
      <el-table-column prop="yaw" align="center" label="电量" width="80">
        <template slot-scope="{row}"><span>{{ row.yaw }}%</span></template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="350">
        <template slot-scope="{row}">
          <el-button type="info" size="small" @click="lookDetail(row)">查看</el-button>
          <el-button type="warning" size="small"
            @click="$router.push({ path: '/warnManage/warnlist', query: { id: row.id } })">报警</el-button>
          <el-button type="primary" plain size="small" @click="$router.push({ path: '/serverManage/playback', query: { id: row.id } })">回放</el-button>
          <el-button type="primary" size="small" @click="editUser(row)" v-if="controlBtn.edit">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteUser(row)" v-if="controlBtn.del">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
      @pagination="getList" />
    <!-- 添加、编辑 -->
    <el-dialog @close="dialogClose" :title="dialogVisible.dia_title" :visible.sync='dialogVisible.show'
      :close-on-click-modal=false>
      <el-form :rules="rules" :model="dialogVisible" ref="dialogVisible" label-position="top" class="dialogVisible">
        <div class="flex-row" style="flex-wrap: wrap;">
          <el-form-item label="设备类型" style="margin-right:10px" required>
            <el-select v-model="dialogVisible.device_type" filterable="">
              <el-option :key="1" label="热传感器" value=20></el-option>
              <el-option :key="2" label="布控球" value=10></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作业类型" style="margin-right:10px" required>
            <el-select v-model="dialogVisible.work_type" filterable="">
              <el-option :key="1" label="动火作业" value=20></el-option>
              <el-option :key="2" label="巡检作业" value=10></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备组" style="margin-right:10px" required>
            <el-select v-model="dialogVisible.group_id" filterable="">
              <el-option v-for="(item, index) in groupList" :key="index" :label="item.title"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自动推流" style="margin-right:10px" required>
            <el-select v-model="dialogVisible.is_push" filterable="">
              <el-option :key="1" label="手动推流" :value=20></el-option>
              <el-option :key="2" label="自动推流" :value=10></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" style="margin-right:10px" required><el-input v-model="dialogVisible.title"
              placeholder="" clearable></el-input></el-form-item>
          <el-form-item label="设备编号" style="margin-right:10px" required><el-input
              v-model="dialogVisible.code" placeholder="" clearable></el-input></el-form-item>

          <el-form-item label="通讯IP" style="margin-right:10px"><el-input v-model="dialogVisible.ip_addr"
              placeholder="" clearable></el-input></el-form-item>
          <el-form-item label="通讯端口" style="margin-right:10px"><el-input v-model="dialogVisible.ip_port" placeholder=""
              clearable></el-input></el-form-item>
        </div>
        <div>
          <div class="server">GB28181国际配置</div>
          <div class="flex-row">
            <el-form-item label="启用国标" style="margin-right:10px">
              <el-select v-model="dialogVisible.is_gb" filterable="">
                <el-option :key="20" label="否" value=20></el-option>
                <el-option :key="10" label="是" value=10></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="国标设备ID" style="margin-right:10px" class="flex-1">
              <el-input v-model="dialogVisible.gb_id" placeholder="" clearable ></el-input>
            </el-form-item>
            <el-form-item label="国标设备密码" style="margin-right:10px"><el-input v-model="dialogVisible.gb_pwd" placeholder=""
                clearable></el-input></el-form-item>
            <el-form-item label="直播流协议" style="margin-right:10px">
              <el-select v-model="dialogVisible.gb_proto" filterable="">
                <el-option :key="udp" label="udp" value='udp'></el-option>
                <el-option :key="tcp" label="tcp" value='tcp'></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div v-if="dialogVisible.warning.length>0">
          <div class="server">报警阈值</div>
          <el-row :gutter="10">
            <el-col :span="6" v-for="(e,i) in dialogVisible.warning" :key="i" >
              <el-form-item :label="e.title" >
                <el-input v-model="e.num"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <template v-if="dialogVisible.device_type == 20">
          <div>
            <div class="server">主码流配置</div>
            <div>
              <el-form-item label="主码流地址" style="margin-right:10px"><el-input v-model="dialogVisible.live_addr"
                  placeholder="" clearable></el-input></el-form-item>
            </div>
            <div><el-form-item label="主码流rtsp地址" style="margin-right:10px"><el-input v-model="dialogVisible.live_rtsp"
              placeholder="" clearable></el-input></el-form-item></div>
            <div class="flex-row">
              <el-form-item label="主码流用户名称" style="margin-right:10px;width:45%"><el-input v-model="dialogVisible.live_user"
                  placeholder="" clearable></el-input></el-form-item>
              <el-form-item label="主码流密码"><el-input v-model="dialogVisible.live_pwd" placeholder=""
                  clearable></el-input></el-form-item>

            </div>

            <div class="server">子码流配置</div>
            <div><el-form-item label="子码流地址" style="margin-right:10px"><el-input v-model="dialogVisible.red_addr"
                  placeholder="" clearable></el-input></el-form-item></div>
            <div><el-form-item label="子码流rtsp地址" style="margin-right:10px"><el-input v-model="dialogVisible.red_rtsp"
                    placeholder="" clearable></el-input></el-form-item></div>
            <div class="flex-row">
              <el-form-item label="子码流用户名称" style="margin-right:10px;width:45%"><el-input v-model="dialogVisible.red_user"
                  placeholder="" clearable></el-input></el-form-item>
              <el-form-item label="子码流密码"><el-input v-model="dialogVisible.red_pwd" placeholder=""
                  clearable></el-input></el-form-item>
            </div>
            <div class="server">其他配置</div>
            <div class="flex-row">
              <el-form-item label="安装高度" style="margin-right:10px"><el-input v-model="dialogVisible.height"
                  placeholder="" clearable></el-input></el-form-item>
              <el-form-item label="正北偏角" style="margin-right:10px"><el-input v-model="dialogVisible.yaw" placeholder=""
                  clearable></el-input></el-form-item>
              <el-form-item label="经度" style="margin-right:10px"><el-input v-model="dialogVisible.gis_x" placeholder=""
                  clearable></el-input></el-form-item>
              <el-form-item label="纬度"><el-input v-model="dialogVisible.gis_y" placeholder=""
                  clearable></el-input></el-form-item>
            </div>
          </div>
        </template>
        <template v-if="dialogVisible.device_type == 10">
          <div>
            <div class="server">主码流配置</div>
            <div><el-form-item label="主码流地址" style="margin-right:10px"><el-input v-model="dialogVisible.live_addr"
                  placeholder="" clearable></el-input></el-form-item></div>
            <div><el-form-item label="主码流rtsp地址" style="margin-right:10px"><el-input v-model="dialogVisible.live_rtsp"
                    placeholder="" clearable></el-input></el-form-item></div>
            <div class="flex-row">
              <el-form-item label="主码流用户名" style="margin-right:10px"><el-input v-model="dialogVisible.live_user"
                  placeholder="" clearable></el-input></el-form-item>
              <el-form-item label="主码流密码"><el-input v-model="dialogVisible.live_pwd" placeholder=""
                  clearable></el-input></el-form-item>
            </div>
          </div>
        </template>
        <el-form-item>
          <el-button type="default"  @click="dialogVisible.show = false">取消</el-button>
          <el-button type="primary" @click="dialogSubmit()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog class="lookMap" :title="device_info.device_type == 20 ? '查看热传感器' : '查看布球控'"
      :visible.sync='dialogLookVisible' :close-on-click-modal=false>
      <div>
        <!-- <div class="flex-row">
          <div class="flex-col border_line justify-center" style="width:40%">
            <div class="info_title">设备组：{{ device_info.group_title }}</div>
            <div class="info_title">设备名：{{ device_info.title }}</div>
            <div class="flex-row info_title">
              <div class="flex-1">状态：{{ device_info.is_online == 20 ? '离线' : "在线" }}</div>
              <div class="flex-1">电量：{{ device_info.yaw }}%</div>
            </div>
            <div class="info_title">位置：{{ device_info.position }}</div>
            <div class="info_title">GPS：经度{{ device_info.map_x }}纬度{{ device_info.map_y }}</div>
          </div>
          <div class="flex-1 border_line" style="margin-left:10px">
            <div class="sd_map" style="width:100%;height:100%">
              <div class="echart-demo" id="demo" style="width:358px; height:100%;"></div>
            </div>
          </div>
        </div> -->
        <!-- 热传感器 -->
        <div class="server">实时监测</div>
        <!-- <template v-if="device_info.device_type == 20"> -->
          <template>
          <div class="flex-row d_content" style="height:620px">
            <div class="flex-col">
              <div class="flex-col border_line justify-center">
                <div class="info_title">设备组：{{ device_info.group_title }}</div>
                <div class="info_title">设备名：{{ device_info.title }}</div>
                <div class="flex-row info_title">
                  <div class="flex-1">状态：{{ device_info.is_online == 20 ? '离线' : "在线" }}</div>
                  <div class="flex-1">电量：{{ device_info.yaw }}%</div>
                </div>
                <div class="info_title">位置：{{ device_info.position }}</div>
                <div class="info_title">GPS：经度{{ device_info.map_x }}纬度{{ device_info.map_y }}</div>
              </div>
              <div class="flex-1" v-if="device_info.device_type==20">
                <div class="item flex-1">
                  <div class="title">静态屏蔽区域</div>
                  <div class="flex-row align-center item_color">
                    <div style="margin-right: 5px;">编号</div>
                    <el-select v-model="value1" style="width: 90px;" placeholder="请选择" @change="changeValue1">
                      <el-option v-for="item in options1" :key="item.label" :label="item.label" :value="item.label">
                      </el-option>
                    </el-select>
                    <div class="color yellow"></div>
                  </div>
                  <div class="draw_btn" @click="drawView(1)">绘制矩形</div>
                </div>
                <div class="item flex-1">
                  <div class="title">定位分析区域</div>
                  <div class="flex-row align-center item_color">
                    <div style="margin-right: 5px;">编号</div>
                    <el-select v-model="value2" style="width: 90px;" placeholder="请选择" @change="changeValue2">
                      <el-option v-for="item in options2" :key="item.label" :label="item.label" :value="item.label">
                      </el-option>
                    </el-select>
                    <div class="color qs"></div>
                  </div>
                  <div class="draw_btn" @click="drawView(2)">绘制矩形</div>
                </div>
                <div class="item ">
                  <div class="title">温度区域</div>
                  <div class="flex-row align-center item_color">
                    <div style="margin-right: 5px;">编号</div>
                    <el-select v-model="value3" style="width: 90px;" placeholder="请选择" @change="changeValue3">
                      <el-option v-for="item in options3" :key="item.label" :label="item.label" :value="item.label">
                      </el-option>
                    </el-select>
                    <div class="color orange"></div>
                  </div>
                  <div class="flex-row align-center item_color">
                    <div style="margin-right: 5px;">温度</div>
                    <el-input v-model="wd"  style="width: 90px;" placeholder="" @blur="changeWd"></el-input>
                    <div class="">℃</div>
                  </div>
                  <div class="draw_btn" @click="drawView(3)">绘制矩形</div>
                </div>
              </div>
            </div>
            <div class="flex-1 right_item flex-row align-center justify-center">
              <div class="content">
                <canvas v-if="dialogLookVisible" ref="markCanvas" tabindex='0'></canvas>
                <JessibucaDemo :screen_width="610" :screen_height="610" :deviceId="deviceId"/>
              </div>
            </div>
          </div>
          <el-button type="primary" plain @click="dialogLookVisible = false">取消</el-button>
          <el-button type="primary" @click="drawSubmit()">确定</el-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { group_list, device_list, device_save, device_delete, device_info, config_list, config_save,device_play } from '@/api/server'
import Pagination from '@/components/Pagination/index.vue'
import * as echarts from 'echarts';
import shanDong from '../../utils/shandong.json'
import { draw, changeValue } from "@/utils/draw1"; // 矩形绘制方法
import JessibucaDemo from '@/components/JessibucaPlay.vue'
import store from '@/store'
import { warning_type_save ,warning_type_list,warning_type_delete } from '@/api/warn'

export default {
  components: {
    Pagination,
    JessibucaDemo
  },
  data() {
    return {
      tableData: [],
      warning_list:[],
      listQuery: {
        page: 1,
        page_size: 10,
        pageSize:10,
        keyword: '',
        is_online: '',
        group_id: ''
      },
      status: [{ title: '离线', code: 20 }, { title: '在线', code: 10 }],
      total: 0,
      roleList: [],
      dialogLookVisible: false,
      dialogVisible: {
        show: false,
        dia_title: '添加设备组',
        sort_num: 0,
        title: '',
        device_type: '',
        group_id: '',
        work_type: '',
        ip_addr: '',
        ip_port: '',
        lat: '',
        lng: '',
        gb_pwd: '',
        gb_id: '',
        live_user: '',
        live_pwd: '',
        live_addr: '',
        live_rtsp: '',
        red_user: '',
        red_pwd: '',
        red_addr: '',
        red_rtsp: '',
        height: '',
        yaw: '',
        code: '',
        is_gb:20,
        is_push:20,
        gb_proto:'udp',
        warning:[]
      },
      rules: {
        title: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        sort_num: [{ required: true, message: '排序号不能为空', trigger: 'blur' }]
      },
      groupList: [],
      device_info: {},
      deviceId:"",
      options1: [{
        label: '1'
      }, {
        label: '2'
      }, {
        label: '3'
      }, {
        label: '4'
      }, {
        label: '5'
      }],
      options2: [{
        label: '1'
      }, {
        label: '2'
      }, {
        label: '3'
      }, {
        label: '4'
      }, {
        label: '5'
      }],
      options3: [{
        label: '1'
      }, {
        label: '2'
      }, {
        label: '3'
      }, {
        label: '4'
      }, {
        label: '5'
      }],
      value1: '',
      value2: '',
      value3: '',
      wd: 0,
      markList: [], // 标记内容数组
      controlBtn:{
        add:false,
        del:false,
        edit:false,
        auth:false
      }
    }
  },
  watch: {
    markList: {
      handler: function (val) {
        console.log(val)
      },
      immediate: true
    },
    dialogLookVisible: {
      handler: function (val) {
        console.log(val)
      },
      immediate: true
    }
  },
  methods: {
    changeWd(e) {
      this.initCanvas('3', this.value3, this.wd)
    },
    changeValue1(e) {
      changeValue('1', e)
      // this.initCanvas('1', e)
    },
    changeValue2(e) {
      changeValue('2', e)
      // this.initCanvas('2', e)
    },
    changeValue3(e) {
      changeValue('3', e, this.wd)
    },
    initFirstCanvas() {
      let that = this
      this.$nextTick(() => {
        // 初始化canvas宽高
        let cav = this.$refs.markCanvas;
        cav.width = '610';
        cav.height = '610';
        let ctx = cav.getContext('2d');
        cav.style.cursor = 'crosshair'

        // 计算使用变量
        let list = this.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存

        // 若服务端保存的为百分比则此处需计算实际座标, 直接使用实际座标可省略
        list.forEach(function (value, index, array) {
          let newValue = {
            id: value.id || 0,
            x: value.x,
            y: value.y,
            w: value.w,
            h: value.h,
            bh: value.bh,
            type: value.type,
            wd: value.wd
          }
          list.splice(index, 1, newValue)
        })
        // 若list长度不为0, 则显示已标记框
        if (list.length !== 0) {
          list.forEach(function (value, index, array) {
            ctx.beginPath();
            ctx.rect(value.x, value.y, value.w, value.h);
            if (value.type == 1) {
              ctx.strokeStyle = '#FFFF00';
              ctx.fillStyle = "#FFFF00";
              ctx.fillText(value.bh, value.x, value.y);
            } else if (value.type == 2) {
              ctx.strokeStyle = '#00FFFF';
              ctx.fillStyle = "#00FFFF";
              ctx.fillText(value.bh, value.x, value.y);
            } else {
              ctx.strokeStyle = '#FFA500';
              ctx.fillStyle = "#FFA500";
              ctx.fillText(value.bh + '  ' + value.wd + '℃', value.x, value.y);
            }
            ctx.font = "15px Arial";
            // ctx.fillText(ArialLabel, value.x, value.y);
            ctx.stroke();
          });
        }
      })
    },
    drawSubmit() {
      let params = this.markList.map(e => {
        var id = e.id || 0
        let color = ''
        if (e.type == 1) {
          color = '#FFFF00'
        } else if (e.type == 2) {
          color = '#00FFFF'
        } else {
          color = '#FFA500'
        }
        return { id: id, device_id: this.device_info.id, config_code: parseInt(e.bh), config_type: parseInt(e.type), temp: parseInt(e.wd), pos_x: e.x, pos_y: e.y, width: e.w, height: e.h, video_width: 610, video_height: 610, color: color }
      })
      let config = { device_id: this.device_info.id, datas: params }
      config_save(config).then(res => {
        this.$message({
            message: res,
            type: 'success'
          });
      })
    },
    drawView(num) {
      if (num == 1) {
        if (!this.value1 || this.value1 == '') {
          // } else {
          this.$message({
            message: '请填写编号',
            type: 'warning'
          });
        } else {
          this.initCanvas(num, this.value1)
        }
      } else if (num == 2) {
        if (!this.value2 || this.value2 == '') {
          // } else {
          this.$message({
            message: '请填写编号',
            type: 'warning'
          });
        } else {
          this.initCanvas(num, this.value2)
        }
      } else {
        if (!this.value3 || this.value3 == '') {
          //   this.initCanvas(num, this.value3, this.wd)
          // } else {
          this.$message({
            message: '请填写编号和温度',
            type: 'warning'
          });
        } else {
          this.initCanvas(num, this.value3, this.wd)
        }
      }
    },
    initCanvas(num, value, wd) {
      let that = this
      this.$nextTick(() => {
        // 初始化canvas宽高
        let cav = this.$refs.markCanvas;
        cav.width = '610';
        cav.height = '610';
        let ctx = cav.getContext('2d');
        cav.style.cursor = 'crosshair'

        // 计算使用变量
        let list = this.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存

        // 若服务端保存的为百分比则此处需计算实际座标, 直接使用实际座标可省略
        list.forEach(function (value, index, array) {
          let newValue = {
            id: value.id || 0,
            x: value.x,
            y: value.y,
            w: value.w,
            h: value.h,
            bh: value.bh,
            type: value.type,
            wd: value.wd
          }
          list.splice(index, 1, newValue)
        })
        // 若list长度不为0, 则显示已标记框
        if (list.length !== 0) {
          list.forEach(function (value, index, array) {
            ctx.beginPath();
            ctx.rect(value.x, value.y, value.w, value.h);
            if (value.type == 1) {
              ctx.strokeStyle = '#FFFF00';
              ctx.fillStyle = "#FFFF00";
              ctx.fillText(value.bh, value.x, value.y);
            } else if (value.type == 2) {
              ctx.strokeStyle = '#00FFFF';
              ctx.fillStyle = "#00FFFF";
              ctx.fillText(value.bh, value.x, value.y);
            } else {
              ctx.strokeStyle = '#FFA500';
              ctx.fillStyle = "#FFA500";
              ctx.fillText(value.bh + '  ' + value.wd + '℃', value.x, value.y);
            }
            ctx.font = "15px Arial";
            // ctx.fillText(ArialLabel, value.x, value.y);
            ctx.stroke();
          });
        }
        changeValue(num, value, wd)
        // if(num==1){
        //   changeValue(num,value,this.wd)
        // }else if(num==2){
        //   changeValue(num,this.value2,this.wd)
        // }else{
        //   changeValue(num,this.value3,this.wd)
        // }
        // 调用封装的绘制方法
        draw(cav, list);

        // 备注: js中对象操作指向的是对象的物理地址, 获取绘制完矩形的结果数组直接取用或处理this.markList即可
      })
    },
    getConfigInfo(device_id) {
      config_list({ id: device_id }).then(res => {
        // id: value.id || 0,
        //     x: value.x,
        //     y: value.y,
        //     w: value.w,
        //     h: value.h,
        //     bh: value.bh,
        //     type: value.type,
        //     wd: value.wd
        let result = res
        var arr = result.map(e => {
          return { id: e.id, x: e.pos_x, y: e.pos_y, w: e.width, h: e.height, bh: e.config_code, type: e.config_type, wd: e.temp }
        })
        this.markList = arr
        this.initFirstCanvas()
      })
    },
    lookDetail(row) {
      device_info({ id: parseInt(row.id) }).then(res => {
        this.device_info = res
        if (res.device_type == 20) {
          this.getConfigInfo(res.id)
        }
        this.dialogLookVisible = true
        this.deviceId = row.id
        this.$nextTick(() => {
          this.mapChartInit()
        })
      })
    },
    dialogClose() {
      // this.$refs.dialogVisible.resetFields()
    },
    editUser(item) {

      let that = this
      device_info({ id: parseInt(item.id) }).then(res => {
        let row = res
        this.dialogVisible.dia_title = '编辑设备'

        this.dialogVisible.title = row.title
        this.dialogVisible.sort_num = row.sort_num
        this.dialogVisible.device_type = row.device_type.toString()

        this.dialogVisible.work_type = row.work_type.toString()
        this.dialogVisible.ip_addr = row.ip_addr
        this.dialogVisible.ip_port = row.ip_port
        this.dialogVisible.group_id = row.group_id

        this.dialogVisible.lat = row.lat
        this.dialogVisible.lng = row.lng
        this.dialogVisible.live_user = row.live_user

        this.dialogVisible.gb_id = row.gb_id
        this.dialogVisible.gb_pwd = row.gb_pwd

        this.dialogVisible.live_pwd = row.live_pwd
        this.dialogVisible.live_addr = row.live_addr
        this.dialogVisible.live_rtsp = row.live_rtsp
        this.dialogVisible.red_user = row.red_user
        this.dialogVisible.red_pwd = row.red_pwd
        this.dialogVisible.red_addr = row.red_addr
        this.dialogVisible.red_rtsp = row.red_rtsp
        this.dialogVisible.height = row.height
        this.dialogVisible.is_push = row.is_push

        this.dialogVisible.yaw = row.yaw
        this.dialogVisible.code = row.code
        this.dialogVisible.gb_proto = row.gb_proto
        this.dialogVisible.id = row.id
        this.dialogVisible.is_gb = row.is_gb.toString()
        this.dialogVisible.warning = row.warning
        this.dialogVisible.show = true
      });
    },
    deleteUser(row) {
      let that = this
      this.$confirm( '确实删除当前设备吗？','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        console.log(row)
        device_delete({ id: row.id }).then(res => {
          that.getList()
        })
      })
    },
    dialogSubmit() {
      let that = this
      this.$refs['dialogVisible'].validate((valid) => {
        if (valid) {
          let newList = JSON.parse(JSON.stringify(that.dialogVisible))
          newList.sort_num =  !isNaN(that.dialogVisible.sort_num) ? 0 : parseInt(that.dialogVisible.sort_num)
          newList.device_type = parseInt(that.dialogVisible.device_type)
          newList.group_id = parseInt(that.dialogVisible.group_id)
          newList.work_type = parseInt(that.dialogVisible.work_type)
          newList.is_gb = parseInt(that.dialogVisible.is_gb)
          device_save(newList).then(res => {
            that.dialogVisible.show = false
            that.getList()
          })
        }
      })
    },
    search() {
      this.listQuery.page = 1
      this.getList()
    },
    clear() {
      this.listQuery.page = 1
      this.listQuery.keyword = ''
      this.listQuery.is_online = ''
      this.listQuery.group_id = ''
      this.getList()
    },
    addUser() {
      this.dialogVisible.dia_title = '添加设备'

      this.dialogVisible.title = ''
      this.dialogVisible.sort_num = ''
      this.dialogVisible.device_type = ''

      this.dialogVisible.work_type = ''
      this.dialogVisible.ip_addr = ''
      this.dialogVisible.ip_port = ''

      this.dialogVisible.lat = ''
      this.dialogVisible.lng = ''
      this.dialogVisible.live_user = ''
      this.dialogVisible.group_id = ''

      this.dialogVisible.live_pwd = ''
      this.dialogVisible.live_addr = ''
      this.dialogVisible.live_rtsp = ''
      this.dialogVisible.red_user = ''

      this.dialogVisible.red_pwd = ''
      this.dialogVisible.red_addr = ''
      this.dialogVisible.red_rtsp = ''
      this.dialogVisible.height = ''

      this.dialogVisible.gb_id = ''
      this.dialogVisible.gb_pwd = ''

      this.dialogVisible.yaw = ''
      this.dialogVisible.code = ''
      this.dialogVisible.is_gb = '20'
      this.dialogVisible.id = 0
      this.dialogVisible.gb_proto = 'udp'
      this.dialogVisible.is_push = 20
      this.dialogVisible.warning = this.warning_list
      this.dialogVisible.show = true
    },
    getList() {
      device_list(this.listQuery).then(res => {
        this.tableData = res.data
        this.total = res.total
      })
    },
    getGroupList() {
      group_list(this.listQuery).then(res => {
        this.groupList = res.data
      })
    },
    mapChartInit() {
      let that = this
      var geoCoordMap = {};
      this.$set(geoCoordMap, that.device_info.group_title, [that.device_info.lat, that.device_info.lng])
      // 将坐标与值对应并反映在地图上
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      //获取echart对象
      let dom = document.getElementById('demo')
      if (dom) {
        //初始化
        let myEchart = echarts.init(dom)
        //注册地图
        echarts.registerMap('山东', shanDong)
        let option = {
          series: [{
            // tooltip: {
            //     trigger: 'item',
            // },
            name: '山东省数据',
            type: 'effectScatter',
            map: '山东', // 自定义扩展图表类型
            coordinateSystem: 'geo',
            showLegendSymbol: true, // 存在legend时显示
            label: { // 文字
              // show: true,
              // color: '#fff',
              // fontSize: 10
            },
            symbol: 'circle',
            symbolSize: 10,
            emphasis: { // 鼠标移入时显示的默认样式
              // itemStyle: {
              //     areaColor: '#ffffff',
              //     borderColor: '#ffffff',
              //     borderWidth: 1
              // },
              // label: { // 文字
              //     show: true,
              //     color: '#fff',
              //     fontSize: 12,
              //     fontWeight: 600
              // },
            },
            data: convertData([
              // {name: "滨州跨境电商产业园", value: 150},
              // {name: "滨州数字经济产业园", value: 250},
              { name: that.device_info.group_title, value: 350 }
            ])
          }],
          geo: {
            map: '山东',
            label: {
              show: true,
              color: '#333',
              emphasis: {
                show: true
              }
            },

            itemStyle: {
              normal: {
                areaColor: '#f5f5f5',
                borderWidth: 1.2,//设置外层边框
              },
              emphasis: {
              }
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              // 提示框外框样式及内容数据
              // const htmlContent = `<div style="width: 236px; height: 104px; ">
              //     <!-- 提示框顶部标题样式及数据 smsUseData.xAxis.date（标题数据）-->
              //     <div style="color: #000000D9; border-bottom: 1px solid #F0F0F0; padding: 5px 16px;">
              //     ${params.name}
              //     </div>
              //     <div style="padding: 12px 16px; position: relative; display:flex; justify-content:center; align-items:center;">
              //         <p style="background:red;width:6px;height:6px;border-radius:3px;"></p>

              //         <div class="flex-1"> ${params.name}</div>
              //     </div>
              // </div>`;
              // return htmlContent;

              return `<div> ${params.name}</div>`;
            }
          },
        }
        myEchart.setOption(option);
        window.addEventListener('resize', function () {
          myEchart.resize();
        });
      }
    },
    get_warining_list(){
      warning_type_list().then(res=>{
        this.warning_list = res
      })
    }
  },
  mounted() {
    this.getList()
    this.getGroupList()
    this.get_warining_list()
    const mainRoutes = store.getters.mainRoutes
    console.log(mainRoutes.equipmentlist,'mainRoutes')
    if(mainRoutes.equipmentlist && mainRoutes.equipmentlist.length>0){
      mainRoutes.equipmentlist.forEach(e=>{
        if(e == '增加'){
          this.controlBtn.add = true
        }
        if(e == '删除'){
          this.controlBtn.del = true
        }
        if(e == '修改'){
          this.controlBtn.edit = true
        }
        if(e == '权限'){
          this.controlBtn.auth = true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialogVisible {
  ::v-deep.el-form-item__label {
    padding: 0 !important;
  }
}
.server {
  background: #f0f0f0;
  padding: 10px 15px;
  margin-bottom: 10px;
}

.d_content {
  .item {
    border: 1px solid #dbdbdb;
    width: 190px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px;

    .item_color {
      margin-top: 10px;

      .color {
        width: 30px;
        height: 20px;
        margin-left: 10px;
      }

      .yellow {
        background: yellow;
      }

      .qs {
        background: #00FFFF;
      }

      .orange {
        background: orange;
      }
    }

    .draw_btn {
      background: #666;
      color: #fff;
      text-align: center;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      cursor: pointer;
    }
  }

  .right_item {
    border: 1px solid #dbdbdb;
    margin-bottom: 10px;

    .content {
      width: 610px;
      height: 610px;
      background: #dbdbdb;
      position: relative;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
      }

      canvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
      }
    }
  }
}
.title{
  font-weight: bold;
}
.info_title {
  font-size: 14px;
  color: #2d2d2d;
  padding-bottom: 10px;
}

.border_line {
  border: solid 1px #dbdbdb;
  padding: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  height: 250px;
}

.lookMap {
  ::v-deep .el-dialog {
    width: 850px;
  }
  ::v-deep.el-dialog__body {
    padding: 0 20px 30px 20px;
  }
}
</style>
